<script setup>
import {useGet} from '@/hooks/index.js'
import { getMessageApi } from '@/apis/message.js';

const {list,onScrollToLower,refresh,isTriggered,hasMore,readAll}=useGet(getMessageApi,201)


</script>
<template>
	<!-- 
	上拉分页：
    @scrolltolower事件做触底检测
	下拉刷新：
	@refresherrefresh刷新执行事件
	refresher-enabled开启下拉刷新=》默认为true
	refresher-trigger控制下拉刷新的loading显示隐藏
	 -->
	<scroll-view class="scroll-view" refresher-enabled scroll-y @scrolltolower="onScrollToLower" @refresherrefresh="refresh" :refresher-triggered="isTriggered">
		<view class="scroll-view-wrapper">
			<view class="message-action" @click="readAll">
				<text class="iconfont icon-clear"></text>
				全部已读
			</view>
			<uni-card :border="false" :is-shadow="false" v-for="item in list" :key="item.id">
				<view class="brief">{{ item.content }}</view>
				<view class="extra">
					<text class="time">{{ item.created }}</text>
					<navigator hover-class="none" class="link" url="/subpkg_message/content/index">查看详情</navigator>
				</view>
				<template v-slot:title>
					<!-- 类名追加，只有isRead等于0的时候，小红点才会追加，如果不等于0就不会追加 -->
					<view class="title" :class="{ unread: item.isRead === 0 }">您有新的运输任务</view>
				</template>
			</uni-card>

			<view v-if="false" class="message-blank">暂无消息</view>
		</view>

		<!-- 没有更多数据了 -->
		<view style="text-align: center; width: 100%; height: 30px" v-if="hasMore === false">没有更多数据了</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
